<template lang="">
    <div id='head' class='clear'>
        <header>
            <nav>
                <ul>
                    <li>亲，请登录</li>
                    <li><a href="">免费注册</a></li>
                    <li><a href="">手机逛淘宝</a></li>
                </ul>

                <ul>
                    <li><a href="">淘宝网首页</a></li>
                    <Titlecomponent :titleDatas='headDatas[0]'></Titlecomponent>
                    <li><a href="">购物车</a></li>
                    <Titlecomponent :titleDatas='headDatas[1]'></Titlecomponent>
                    <li><a href="">商品分类</a></li>
                    <Titlecomponent :titleDatas='headDatas[2]'></Titlecomponent>
                    <li><a href="">联系客服</a></li>
                    <Titlecomponent :titleDatas='headDatas[3]'></Titlecomponent>
                    
                </ul>
            </nav>
        </header>
    </div>
</template>
<script>
import Titlecomponent from '@/components/Titlecomponent.vue'

export default {
    data(){
        return{
            headDatas:[
                {title:'我的淘宝',content:['已买到的宝贝','我的足迹','我的上新','淘宝达人','新欢']},
                {title:'收藏夹',content:['收藏的宝贝','收藏的店铺']},
                {title:'卖家中心',content:['免费开店','已卖出的宝贝','出售中的宝贝','卖家服务市场','卖家培训中心']},
                {title:'网站导航',content:['免费开店','已卖出的宝贝','出售中的宝贝','卖家服务市场','卖家培训中心']}
            ]
        }
    },
    components:{
        Titlecomponent,
        
    }
}
</script>
<style>
    header{
        margin: 0 auto;
        height:35px;
        width: 100%;
        background-color: #f5f5f5;
        border-bottom: 1px solid #eee;
    }
    header>nav{
        width: 990px;
        margin:0 auto;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    ul ol{
        position: absolute;
        top: 35px;
        padding: 2px;
        left: 0;
        width:90px;
        border: 1px solid #eee;
        background-color: #fff;
        border-top: none;
        display: none;
    }
    ul:first-of-type{
        float: left;
    }
    ul:last-of-type{
        float: right;
    }
    ul>li{
        float: left;
        margin:0 5px;
        position: relative;
    }
    ul>li:hover {
        background: #fff;
    }
    ul>li:hover ol{
        display: block;
    }
    a{
        text-decoration:none;
    }
    li,a,span{
        list-style:none;
        line-height: 35px;
        color:#6C6C6C;
        font-size: 12px;
        padding: 0 6px;
    }
    nav:after {
        content: "";
        display: block;
        clear: both;
    }
    
    
</style>